<script setup>
	import { ref , computed} from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { store } from '@/uni_modules/uni-id-pages/common/store.js'
	
	const defaultImg = ref('https://iknow-pic.cdn.bcebos.com/e61190ef76c6a7ef32ad14b9fafaaf51f2de66a2')
	const bgImage =  ref('https://mp-7acef2d1-7ff9-4cf9-a875-44d16d11cda9.cdn.bspapp.com/6qWpdJNuzv.png')
	const list = ref(['我的列表','我的图片','娱乐列表','设置'])
	const info = computed(() => {
		return store.userInfo
	})
	
	const changeSet = () => {
		if(!info.value?._id) return uni.navigateTo({url:'/uni_modules/uni-id-pages/pages/login/login-withoutpwd'})
		uni.navigateTo({
			url:'/uni_modules/uni-id-pages/pages/userinfo/userinfo'
		})
	}
	
	const changeList = (index) => {
		if(!info.value?._id) return uni.navigateTo({url:'/uni_modules/uni-id-pages/pages/login/login-withoutpwd'})
		const urlArr = ['/pages/user/list','/pages/user/image','/pages/user/leisureList','/uni_modules/uni-id-pages/pages/userinfo/userinfo']
		uni.navigateTo({
			url:urlArr[index]
		})
	}
	
</script>

<template>
	<view class="hander" :style="{background:`url(${bgImage})`,backgroundSize:'cover'}">
		<view class="flex" style="justify-content: flex-start;" @click="changeSet">
			<cloud-image height="120rpx" width="120rpx" borderRadius="50%" :src="info.avatar_file?.url || defaultImg"></cloud-image>
			<text style="margin-left: 20rpx;">{{info._id ? (info.nickname || '欢迎') : '去登陆'}}</text>
		</view>
	</view>
	<view class="page-content">
		<view class="list flex" v-for="(item,index) in list" :key="index" @click="changeList(index)">
			<text>{{item}}</text>
			<u-icon name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.hander{
		width: 100%;
		height: 400rpx;
		padding: 40rpx;
		color: #000;
		font-weight: 600;
	}
	.list{
		justify-content: space-between;
		height: 100rpx;
		border-bottom: 2rpx solid #eee;
		font-size: 36rpx;
	}
</style>